<template>
  <div class="index">
    <div class="nav">
      <div class="left">
        <span @click="fn">{{name}}</span>
        <i class="iconfont icon-xiaosanjiaodown"></i>
      </div>
      <div class="middle">
        <router-link to="/home/index/1">正在热映</router-link>
        <router-link to="/home/index/2">即将上映</router-link>
      </div>
      <div class="right">
        <i class="iconfont icon-ziyuan"></i>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data(){
    return{

      name:"成都"

    }
  },
  watch:{
    name:{
      handler(n){
        this.name=this.$route.query.name || "成都"
        // console.log(this.name)
        // if(!this.name) this.name = "成都"
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    fn(){
      this.$router.push('/city')
    }
  }
};
</script>

<style lang="scss" scoped>
.router-link-exact-active{
    color: red;
    border-bottom: 0.04rem solid red;
}
.index {
  width: 100%;
  margin-top: 50px;
  .nav {
    display: flex;
    height: 0.88rem;
    text-align: center;
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.02rem solid #eee;
    .left {
      span {
        font-size: 0.3rem;
        color: #444444;
        padding-left: 0.3rem;
        font-weight: 400;
      }
      i {
        font-size: 0.4rem;
        color: #b0b0b0;
      }
    }
    .middle {
      width: 4.16rem;
      a {
        display: inline-block;
        font-size: 0.3rem;
        width: 1.6rem;
        height: 0.86rem;
        line-height: 0.86rem;
        text-align: center;
        margin: 0 0.24rem;
        font-weight: 700;
      }
    }
    .right{
      width: 0.9rem;
      i{
        color: red;
        font-size: 0.35rem;
        font-weight: 700;
      }
    }
  }
}
</style>